<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <span>span-1111</span>
    <span class="box1">span-2222</span>
    <span>span-3333</span>
  </div>

  <button class="add">添加节点(尾部)</button>
  <button class="add2">添加节点(头部)</button>
  <button class="del">删除节点</button>
  <script>
    // 1. 获取DOM对象
    const box1 = document.querySelector('.box1')
    const add = document.querySelector('.add')
    const add2 = document.querySelector('.add2')
    const del = document.querySelector('.del')

    // console.log(box1)
    // 2. 查找父节点
    // console.log(box1.parentNode)
    // console.log(box1.parentNode.parentNode)
    // 3. 查找子节点
    // console.log(box1.parentNode.children[2])
    // 4. 查找兄弟节点
    // console.log(box1.previousElementSibling)
    // console.log(box1.nextElementSibling)

    // 5. 往尾部添加节点
    add.addEventListener('click', function () {
      // 5.1 创建一个DOM对象(img)
      const img = document.createElement('img')
      // 5.2 给DOM对象的src属性赋值
      img.src = './img/google.png'
      // 5.3 把DOM对象放入div中去
      box1.parentNode.append(img)
    })

    // 6. 往头部添加节点
    add2.addEventListener('click', function () {
      const color = document.createElement('input')
      color.type = 'color'
      box1.parentNode.prepend(color)
    })

    // 7. 删除节点
    del.addEventListener('click', function () {
      box1.nextElementSibling.remove()
    })

  </script>
</body>

</html>